{% extends "base.html" %}
{% block title %}人物素描查询工具{% endblock %}
{% block head %}
    <link rel="stylesheet" href="static/plugins/datepicker/datepicker3.css">
    <script src="static/plugins/datepicker/bootstrap-datepicker.js"></script>
    <script src="static/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
    <script src="static/plugins/echarts.min.js"></script>
    <style>
        .box-body td {
            border: solid #add9c0;
            border-width: 0px 1px 1px 0px;
            padding: 5px 5px;
            text-align: center;
            font-size: smaller;
        }

        .box-body table {
            border: solid #add9c0;
            border-width: 1px 0px 0px 1px;
            background-color: #eee;
        }

        .box-body th {
            text-align: center;
        }
    </style>
{% endblock %}
{% block contentheader %}人物素描{% endblock %}
{% block contentsmallheader %}提供身份证号、电话、QQ号查询用户详情{% endblock %}
{% block content %}
    <div class="box box-primary ng-scope">
        <div class="box-header with-border">
            <div class="row">
                <div class="col-md-3">
                    <div class="input-group ">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"
                                    aria-expanded="false" id="key_type_button" style="width: 100px">idnumber<span
                                    class="fa fa-caret-down"></span></button>
                            <ul class="dropdown-menu" id="key_type">
                                <li><a>idnumber</a></li>
                                <li><a>phone</a></li>
                                <li><a>qq</a></li>
                            </ul>
                        </div>
                        <!-- /btn-group -->
                        <input type="text" class="form-control" id="key_text">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="input-group date">
                        <div class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                        </div>
                        <input type="text" class="form-control pull-right" id="datepicker"
                               data-date-format="yyyy-mm-dd">
                    </div>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary" id="submit">查询</button>
                </div>
            </div>
        </div>
        <div class="box-body">
            <div class="row">
                <div class="col-md-12" id="basic_account">
                    <table style="width:100%">
                        <thead>
                        <tr>
                            <td colspan="100">
                                <b>基础账号信息</b>
                            </td>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <hr/>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div id="basic_cavans" style="height:500px;width:500px;border:groove;">

                    </div>
                </div>
                <div class="col-md-8">
                    <div class="nav-tabs-custom" id="user_info" style="border:groove;overflow:auto">
                        <ul id="myTab" class="nav nav-tabs">

                        </ul>
                        <div id="myTabContent" class="tab-content">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script type="text/javascript">
        function add_class() {
            $('#treeview3').addClass('active');
            $('#menu3').addClass('menu-open');
            $('#datasqueryuserinfo').addClass('active');
        }
        $('#key_type li').on('click', function (e) {
            $('#key_type_button').html(e.target.innerText + '<span class="fa fa-caret-down"></span>');
        });
        $('#basic_account').hide();
        $('#user_info').hide();
        $('#basic_cavans').hide();
        var paramstype = new Array();
        paramstype[0] = "ppdid";
        paramstype[1] = "resume";
        paramstype[2] = "phonebook";
        paramstype[3] = "jdusername";
        paramstype[4] = "calllist";
        paramstype[5] = "pcbusername";
        {#paramstype[4]="qq";
        paramstype[5]="weixin";
        paramstype[6]="email";
        paramstype[7]="idnumber";#}
        function focus(params) {
            console.log(params);
            if (params.dataType == "node" && params.name != 'idnumber') {
                $('#user_info').hide();
                $('#myTab li').remove();
                $('#myTabContent div]').remove();
                if ($.inArray(params.name, paramstype) < 0) {
                    alert('暂未接入数据......');
                    return;
                }
                $.ajax({
                    url: '/data_query_get_user_account_info',
                    data: {
                        'key': params.name,
                        'value': params.value
                    },
                    success: function (data) {
                        console.log(data);
                        for (var key in data) {
                            $('#myTab').append('<li id="othertitle' + key + '"><a href="#other' + key + '" data-toggle="tab">' + data[key].title + '</a></li>');
                            var content = '<div class="tab-pane fade" id="other' + key + '" style="overflow: auto"><table><tbody>';
                            if (data[key].result_type == 'list') {
                                for (var k in data[key].result) {
                                    var tbody_content = '<tr>';
                                    for (var j in data[key].result[k]) {
                                        var td_ = '<td>';
                                        if (data[key].result[k][j] != null && data[key].result[k][j].length > 20)
                                            td_ += '<a target="_blank" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="' + data[key].result[k][j] + '">' + data[key].result[k][j].substring(0, 20) + '...</a>';
                                        else
                                            td_ += data[key].result[k][j];
                                        td_ += '</td>';
                                        tbody_content += td_;
                                    }
                                    tbody_content += '</tr>';
                                    content += tbody_content;
                                }
                            } else {
                                for (var k in data[key].result) {
                                    if (data[key].result[k] != null && data[key].result[k].length > 20)
                                        content += '<tr><td>' + k + '</td><td><a target="_blank" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="' + data[key].result[k] + '">' + data[key].result[k].substring(0, 20) + '...</a></td></tr>';
                                    else
                                        content += '<tr><td>' + k + '</td><td>' + data[key].result[k] + '</td></tr>';
                                }
                            }
                            content += '</tbody></table></div>';
                            $('#myTabContent').append(content)
                        }
                        $("[data-toggle='popover']").popover();
                        $('#user_info').show();
                    }
                });
            }
        }

        $('#submit').on('click', function (e) {
            if ($('#key_text').val().trim() != '' && $('#datepicker').val().trim() != '') {
                $('#user_info').hide();
                $('#basic_cavans').hide();
                $('#basic_account').hide();
                $('#basic_account tbody').empty();
                $('#myTab li').remove();
                $('#myTabContent div]').remove();
                $.ajax({
                    url: '/data_query_get_user_info',
                    data: {
                        'key': $('#key_type_button').text(),
                        'value': $('#key_text').val(),
                        'date': $('#datepicker').val().trim()
                    },
                    success: function (data) {
                        if (data.status != 'ok') {
                            alert(data.message);
                            return;
                        }
                        var links = [{"source": 0, "target": 1},
                            {"source": 0, "target": 2},
                            {"source": 0, "target": 3},
                            {"source": 0, "target": 4},
                            {"source": 0, "target": 5},
                            {"source": 0, "target": 6},
                            {"source": 0, "target": 7},
                            {"source": 0, "target": 8},
                            {"source": 0, "target": 9},];
                        data.message.forEach(function (node) {
                            node.symbolSize = 50;
                            node.draggable = true;
                        });
                        var option = {
                            title: {
                                text: '账号关系图',
                                top: 'top',
                                left: 'center'
                            },
                            series: [
                                {
                                    roam: true,
                                    type: 'graph',
                                    layout: 'force',
                                    data: data.message,
                                    links: links,
                                    label: {
                                        emphasis: {
                                            show: false
                                        }
                                    },
                                    force: {
                                        repulsion: 2000
                                    }
                                }
                            ]
                        };
                        var myChart = echarts.init(document.getElementById('basic_cavans'));
                        myChart.setOption(option);
                        $('#basic_cavans').show();
                        $('#basic_account').show();

                        var tr1 = "<tr>";
                        var tr2 = "<tr>";
                        for (var key in data.account) {
                            tr1 += "<td><b>" + key + "</b></td>";
                            tr2 += "<td>" + data.account[key] + "</td>";
                        }
                        tr1 += "</tr>";
                        tr2 += "</tr>";
                        $('#basic_account tbody').append(tr1);
                        $('#basic_account tbody').append(tr2);
                        myChart.on('click', focus);

                    }
                });
            }
        });
        $("#datepicker").datepicker({
            language: 'zh-CN',
            autoclose: true,
            todayHighlight: true,
            startDate: new Date(2000, 0, 1),
            endDate: new Date()
        });
        function getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
            return currentdate;
        }
        $("#datepicker").val(getNowFormatDate())
    </script>
{% endblock %}
